<script setup lang="ts">
defineOptions({
    name: 'ConsultDep'
})
import { getDepAllAPI } from '@/apis/consult'
import type { TopDep } from '@/types/consult'
import { computed, onMounted, ref } from 'vue'
import { useConsultStore } from '@/stores'
const store = useConsultStore()
// 记录点击的一级科室的索引号
const active = ref(0)
// 响应式数据
const depAllList = ref<TopDep[]>([])

// 定义函数获取科室
const getDepAll = async () => {
    const res = await getDepAllAPI()
    // console.log(res)
    depAllList.value = res.data
    // console.log(depAllList.value)
}

// 通过计算属性获取2级的科室
const subDepAll = computed(() => depAllList.value[active.value]?.child)

onMounted(() => {
    getDepAll()
})
</script>

<template>
    <div class="consult-dep-page">
        <cp-nav-bar title="选择科室" />
        <div class="wrapper">
            <!-- 一级科室 -->
            <van-sidebar v-model="active">
                <van-sidebar-item v-for="item in depAllList" :title="item.name" :key="item.id" />
            </van-sidebar>
            <!-- 二级科室 -->
            <div class="sub-dep">
                <router-link to="/consult/illness" v-for="subDep in subDepAll" :key="subDep.id"
                    @click="store.setDepId(subDep.id)">
                    {{ subDep.name }}
                </router-link>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.van-sidebar {
    width: 114px;

    &-item {
        padding: 14px;
        color: var(--cp-tag);

        &--select {
            color: var(--cp-main);
            font-weight: normal;

            &::before {
                display: none;
            }
        }
    }
}

.consult-dep-page {
    padding-top: 46px;

    .wrapper {
        height: calc(100vh - 46px);
        overflow: hidden;
        display: flex;

        .sub-dep {
            flex: 1;
            height: 100%;
            overflow-y: auto;

            >a {
                display: block;
                padding: 14px 30px;
                color: var(--cp-dark);
            }
        }
    }
}
</style>